<template>
<div>
    这是 slotRender 容器
    <slot-render>
        <template v-if="props.render" #append>
            <div ref="appendRef"></div>
        </template>
    </slot-render>

</div>
</template>

<script lang="ts" setup>
import SlotRender from "../SlotRender/index.vue"
// eslint-disable-next-line vue/no-dupe-keys
import {onMounted, ref, h, PropType, VNode, watch, render} from "vue";

const props = defineProps({
    render:{
        type:Object as PropType<VNode|null>,
        required:false,
        default: null
    }
})

const appendRef = ref<HTMLElement>();

function initSlotRender(){
    if(props.render && appendRef.value){
        render(props.render,appendRef.value as HTMLElement)
    }
}
onMounted(()=>{
})

watch(()=>appendRef.value,()=>{
    initSlotRender();
})
</script>

<style scoped>

</style>
